<template>
  <v-modal :showModal="visible" :maskClosable="false" @close="close">
    <div slot="content" id="confirm" v-if="visible">
      <div class="title">{{title}}</div>
      <div class="text">{{text}}</div>
      <div class="button-group">
        <button @click="cancel"><i class="iconfont icon-close"></i><span>取消</span></button>
        <button @click="confirm"><i class="iconfont icon-check"></i><span>确认</span></button>
      </div>
      <span @click="cancel" class="close iconfont icon-close"></span>
    </div>
  </v-modal>
</template>

<script type="text/ecmascript-6">
  import Modal from 'base/modal/modal'

  export default {
    name: 'confirm',
    props: {
      value: {
        type: Boolean,
        default: false
      },
      title: {
        type: String,
        default: ''
      },
      text: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        visible: this.value
      }
    },
    methods: {
      close(val) {
        this.visible = val
      },
      cancel() {
        this.close(false)
      },
      confirm() {
        this.close(false)
        this.$emit('confirm')
      }
    },
    watch: {
      value(val) {
        this.visible = val
      },
      // 双向绑定传事件给父组件
      visible(val) {
        this.$emit('input', val)
      }
    },
    mounted() {
      if (this.value) {
        this.visible = true
      }
    },
    components: {
      'v-modal': Modal
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss">
  @import "~common/scss/const";

  #confirm {
    position: fixed;
    z-index: 1000;
    width: 72%;
    height: 150px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: $color-highlight-background;
    border: 1px solid #999999;
    box-sizing: border-box;
    padding: 0 15px;
    display: flex;
    flex-direction: column;
    &.content-animate-enter-active, &.content-animate-leave-active {
      transition: all .7s;
    }
    &.content-animate-enter, &.content-animate-leave-to {
      opacity: 0;
    }
    .title {
      width: 100%;
      height: 35px;
      line-height: 35px;
      flex: 0 0 35px;
      border-bottom: 1px solid #999999;
      text-align: center;
      font-size: $font-size-medium;
      color: #dddddd;
      font-weight: bold;
    }
    .text {
      width: 100%;
      flex: 1;
      overflow: hidden;
      text-align: center;
      font-size: $font-size-medium;
      color: #dddddd;
      box-sizing: border-box;
      padding: 10px;
    }
    .button-group {
      width: 100%;
      height: 40px;
      flex: 0 0 40px;
      overflow: hidden;
      border-top: 1px solid #999999;
      display: flex;
      padding: 8px 1px;
      box-sizing: border-box;
      justify-content: space-between;
      button {
        background: none;
        margin: 0;
        font-size: $font-size-small;
        color: #dddddd;
        border: 1px solid #999999;
        cursor: pointer;
        padding: 0;
        width: 80px;
        flex:0 0 80px;
        text-align: left;
        display: flex;
        align-items: center;
        i {
          flex: 0 0 20px;
          text-align: center;
          display: inline-block;
        }
        span {
          flex: 1;
          display: inline-block;
          text-align: center;
          overflow: hidden;
          white-space: nowrap;
        }
      }
    }
    .close {
      display: block;
      border: 1px solid #999999;
      position: absolute;
      right: -8px;
      top: -8px;
      width: 20px;
      height: 20px;
      background-color: $color-highlight-background;
      text-align: center;
      line-height: 20px;
      color: #dddddd;
      font-weight: bold;
      cursor: pointer;
    }
  }
</style>
